<template>
  <div id="mainApp">
    <table>
      <tr>
        <td>
          <div id="screen">
            <router-view keep-alive></router-view>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div id = "button-area">
            <table>
              <tr>
                <td>
                  <button @click="click('brill')"> BRILL </button>
                  <button @click="click('disp')"> DISP </button>
                  <button @click="click('menu-esc')"> MENU ESC </button>
                </td>
                <td></td>
                <td>
                  <button @click="click('up')"> △ </button>
                  <button @click="click('up')"> ▽ </button>
                  <button @click="click('left')"> ◁ </button>
                  <button @click="click('right')"> ▷ </button>
                </td>
              </tr>

              <tr>
                <td>
                  <button @mousedown="mousedown('pwr')" @mouseup="mouseup('pwr')"> pwr </button>
                  <button @click="click('nav_status')"> PWD </button>
                  <button @click="click('ent_ack')"> ENT_ACK </button>
                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import * as AISKey from './utils/ais-key'

  function appPreprocess (evt) {
    if (evt.holdon === false) {
      evt.app.$options.aisBeforeClick.call(vm, evt)
    }
    if (!evt.continue) {
      return
    }

    let funcname = AISKey.KEYMAP[evt.keyname]
    if (evt.holdon === true) {
      funcname += 'holdon'
    }

    if (evt.dblclick === true) {
      funcname += 'dblclick'
    }

    let vm = evt.vm
    let handler = vm.$options[funcname]
    if (handler) {
      handler.call(vm, evt)
    }
    if (evt.continue && evt.anykey) {
      handler = vm.$options[AISKey.ANYKEY]
      if (handler) {
        handler.call(vm, evt)
      }
    }
  }

  let clickTimeout = {
    _timeout: null,
    set: function (fn) {
      let that = this
      that.clear()
      that._timeout = setTimeout(fn, 300)
    },
    clear: function () {
      let that = this
      if (that._timeout) {
        window.clearTimeout(that._timeout)
      }
    }
  }

export default {
    data () {
      return {
      }
    },
    methods: {
      mousedown (keyname) {
        if (this.holdonTimeout >= 0) {
          clearTimeout(this.holdonTimeout)
        }

        let _this = this
        // 500毫秒算长按
        this.holdonTimeout = setTimeout(function () {
          _this.holdon(keyname)
          _this.holdonTimeout = -1
        }, 500)
      },
      mouseup (keyname) {
        clearTimeout(this.holdonTimeout)
        this.click(keyname)
        this.holdonTimeout = -1
      },
      holdon (keyname) {
        // 需要处理长按的事件有
        // 1.关机
        // 2.长按LIST方向切换mark/track,route,beancon(短按为正向切换)
        // 3.plotter长按route按钮显示route页面
        // 4.亮度调节长按right-click恢复默认
        // 5.长按display按钮,反向调节displaymode
        let evt = {
          ais: this.$ais,
          keyname: keyname,
          continue: true,
          anykey: true,
          currentPage: this.$ais.currentPage,
          app: this,
          vm: this,
          holdon: true
        }
        appPreprocess(evt)
        if (evt.continue) {
          this.$ais.holdon(evt)
        }
      },
      dblclick (keyname) {
        let evt = {
          ais: this.$ais,
          keyname: keyname,
          continue: true,
          anykey: true,
          currentPage: this.$ais.currentPage,
          app: this,
          vm: this,
          holdon: false,
          dblclick: true
        }
        clickTimeout.clear()
        appPreprocess(evt)
        if (evt.continue) {
          this.$ais.dbclick(evt)
        }
      },
      click (keyname) {
        /*
          事件触发顺序:
          1. appClick[gpsBeforeClick, 具体的按键, anykey]
          2. currentPage[具体的按键, anykey]
        */
        let evt = {
          ais: this.$ais,
          keyname: keyname,
          continue: true,
          anykey: true,
          currentPage: this.$ais.currentPage,
          app: this,
          vm: this,
          holdon: false,
          dblclick: false
        }
        let _this = this
        appPreprocess(evt)
        if (evt.continue) {
          _this.$ais.click(evt)
        }
      }
    },
    aisBeforeClick (evt) {
    },
    [AISKey.PWR + 'holdon'] (evt) {
      let _ais = evt.ais
      _ais.poweron = false
      _ais.routeTo('')
      evt.continue = false
    },
    [AISKey.PWR] (evt) {
      let _ais = evt.ais
      if (_ais.poweron === false) {
        _ais.routeTo('pwr')
      }
      _ais.poweron = true
      evt.continue = false
    }
  }
</script>

<style>
  @import './less/ais.less';
  html {
    height: 100%;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  #mainApp {
    color: #2c3e50;
    margin-top: -100px;
    font-family: Consolas, Source Sans Pro, Helvetica, sans-serif;
    text-align: center;
  }

  #screen {
    width: 480px;
    height: 270px;
    overflow: hidden;
    background-color: #a2a2a2;
  }
</style>
